import { Table, Button, Modal, Form, Input, Select, message, Popconfirm } from 'antd';
import { useState, useEffect } from 'react';
import { getUserList, addCustomer, changeIdentify, deleteUser } from '../../api/login/index'
import './userManage.css'
function UserManage() {
    // 添加用户
    function addNewManager(val) {
        addCustomer(val).then((res) => {
            console.log(res);
            if (res.code === 400) {
                message.open({
                    type: 'error',
                    content: res.msg,
                })
            } else {
                setIsAddModalOpen(!isAddModalOpen)
                form.resetFields()
            }
        }).then(() => {
            getUserInfo()
        })
    }
    // 修改权限
    function editManage(row) {
        setIsEditModalOpen(!isEditModalOpen)
        const cloneRow = JSON.parse(JSON.stringify(row))
        form1.setFieldsValue(cloneRow)
    }
    // 删除用户
    function deleteManager(row) {
        deleteUser({ id: row.id }).then((res) => {
            console.log(res);
        }).then(() => {
            getUserInfo()
        })
    }
    // 弹窗取消
    function handleCancel() {
        setIsAddModalOpen(!isAddModalOpen)
        form.resetFields()
    }
    // 弹窗取消
    function handleCancel1() {
        setIsEditModalOpen(!isEditModalOpen)
        form1.resetFields()
    }
    // 定义表单实例
    const [form] = Form.useForm()
    const [form1] = Form.useForm()
    // 弹窗ok
    function handleOk() {
        // 做表单校验的逻辑，利用表单中提供的 Api 
        form.validateFields().then((val) => {
            console.log(val, '第一个val');
            // val 就是表单中填的内容，是根据 绑定的 form 实例实现的
            addNewManager(val)
        })
    }
    function handleOk1() {
        // 使用绑定表单实例的 API 获取表单中的数据
        form1.validateFields().then((val) => {
            console.log(val, '第一个val');
            // val 就是表单中填的内容，是根据 绑定的 form 实例实现的
            changeIdentify(val).then((res) => {
                console.log(res, 'resss');
                setIsEditModalOpen(!isEditModalOpen)
            }).then(() => {
                getUserInfo()
            })
        })

    }
    // 定义用户列表
    const [userList, setUserList] = useState([])
    // 定义添加模态框
    const [isAddModalOpen, setIsAddModalOpen] = useState(false)
    // 定义权限模态框
    const [isEditModalOpen, setIsEditModalOpen] = useState(false)
    function getUserInfo() {
        getUserList().then(res => {
            console.log(res, 'res');
            // 此时需要定义一个 响应式数据接收用户列表
            setUserList(res.data)
        })
    }
    // 在 DOM 渲染完成时调用方法请求数据
    useEffect(() => {
        getUserInfo()
    }, [])
    const columns = [
        {
            title: '账户',
            dataIndex: 'name'
        },
        {
            title: '账号',
            dataIndex: 'username'
        },
        {
            title: '身份',
            dataIndex: 'identify',
            render: (row) => {
                return (
                    <div>{row === 1 ? '管理员' : '用户'}</div>
                )
            }
        },
        {
            title: '电话',
            dataIndex: 'phone'
        },
        {
            title: '操作',
            width: '300px',
            render: (rowData) => {
                return (
                    <div>
                        <Button type='primary' onClick={() => { editManage(rowData) }} className='table-btn'>修改权限</Button>
                        <Popconfirm
                            title='提示'
                            description='你确定要删除吗？'
                            okText='确定'
                            cancelText='取消'
                            onConfirm={() => { deleteManager(rowData) }}
                        >
                            <Button type='primary' danger className='table-btn'>删除账户</Button>
                            {/* 事件的确认会确认到 外层的 pop气泡弹窗上 */}
                        </Popconfirm>
                    </div>
                )
            }
        }

    ]
    return (
        <div className='userManage'>
            <div className='manageTitle'>
                <h2>用户权限管理</h2>
                <Button type='primary' onClick={() => {
                    setIsAddModalOpen(!isAddModalOpen)
                }}>添加用户</Button>
            </div>
            <div className='manageTable'>
                <Table columns={columns} dataSource={userList} rowKey='username'>

                </Table>
            </div>
            {/* 添加用户 */}
            <Modal
                title={'添加用户'}
                open={isAddModalOpen} /* 需要定义为响应式 */
                onOk={handleOk}
                onCancel={handleCancel}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    labelCol={{
                        span: 4
                    }}
                    wrapperCol={{
                        span: 20
                    }}
                    labelAlign='left'
                    form={form}
                >
                    <Form.Item label='姓名' name='name'>
                        <Input placeholder='请输入姓名'></Input>
                    </Form.Item>
                    <Form.Item label='用户名' name='username'>
                        <Input placeholder='请输入用户名'></Input>
                    </Form.Item>
                    <Form.Item label='密码' name='password'>
                        <Input.Password placeholder='请输入密码'></Input.Password>
                    </Form.Item>
                    <Form.Item label='身份' name='identify'>
                        <Select
                            options={[
                                {
                                    value: 'customer',
                                    label: '用户',
                                }
                            ]}
                            disabled
                            defaultValue={'customer'}
                        ></Select>
                    </Form.Item>
                    <Form.Item label='联系方式' name='phone'>
                        <Input placeholder='请输入电话号码'></Input>
                    </Form.Item>
                </Form>

            </Modal>
            {/* 修改权限 */}
            <Modal
                title={'修改权限'}
                open={isEditModalOpen}
                onOk={handleOk1}
                onCancel={handleCancel1}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    labelCol={{
                        span: 4
                    }}
                    wrapperCol={{
                        span: 20
                    }}
                    labelAlign='left'
                    form={form1}
                >
                    <Form.Item name='id' noStyle>
                        <Input type='hidden'></Input>
                    </Form.Item>
                    <Form.Item label='身份' name='identify' rules={[
                        { required: true, message: '请选择身份' }
                    ]}>
                        <Select
                            options={[
                                { value: 1, label: '管理员' },
                                { value: 2, label: '用户' }
                            ]}
                            placeholder='请选择身份'
                        >
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    )
}

export default UserManage